<template>
  <div class="w-full">
    <Transition name="internalEmail">
      <template v-if="type == 'list'">
        <InboxList @handle-transmit="handleTransmit" @handle-view="handleView" />
      </template>
      <template v-else-if="type == 'transmit'">
        <TransmitMessage
          @handle-return="handleReturn"
          :currentRecordTransmit="currentRecordTransmit"
          @handle-transmit="handleTransmit"
        />
      </template>
      <template v-else-if="type == 'view'">
        <InboxView
          @handle-return="handleReturn"
          @handle-transmit="handleTransmit"
          @handle-reply="handleReply"
          :currentRecord="currentRecord"
        />
      </template>
      <template v-else-if="type == 'write'">
        <Writebox @handle-return="handleReturn" :currentRecord="currentRecord" type="reply" />
      </template>
    </Transition>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue';
  import InboxList from './inboxList.vue';
  import InboxView from './inboxView.vue';
  import TransmitMessage from '../writebox/transmitMessage.vue';
  import Writebox from '../writebox/index.vue';
  const currentRecord = ref({});
  const currentRecordTransmit = ref({});
  const types = ref(['list']);
  const type = computed(() => (types.value.length ? types.value[types.value.length - 1] : ''));
  const handleTransmit = (record) => {
    currentRecordTransmit.value = record;
    types.value.push('transmit');
  };
  const handleView = (record) => {
    currentRecord.value = record;
    types.value.push('view');
  };
  const handleReturn = () => {
    types.value.pop();
  };
  const handleReply = () => {
    types.value.push('write');
  };
</script>
<style lang="less" scoped>
  @import url(../common/internalEmail.less);
</style>
